<template>
  <el-card class="container">
    <el-button type="primary" @click="showSaveOrUpdateTrademark(false)">
      添加品牌
    </el-button>
    <!-- data 数据 border 带边框-->
    <el-table v-loading="loading" :data="trademarkList" border class="table">
      <!--
        el-table-column 列
          prop 当前列要展示的数据名称
          label 列（表）头的名称
          width 列的宽度
       -->
      <el-table-column type="index" label="序号" width="50" align="center" />
      <el-table-column prop="tmName" label="品牌名称" />
      <el-table-column label="品牌LOGO">
        <template v-slot="{ row }">
          <!-- eslint-disable-next-line -->
          <img class="trademark-logo" :src="row.logoUrl" :alt="row.tmName" />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button
            type="warning"
            icon="el-icon-edit"
            @click="showSaveOrUpdateTrademark(true, row)"
          >
            修改
          </el-button>
          <el-button type="danger" icon="el-icon-delete" @click="delTrademark(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :current-page="currentPage"
      :page-sizes="[3, 6, 9, 12]"
      :page-size="pageSize"
      layout="prev, pager, next, jumper,total, sizes"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <el-dialog
      :title="`${isUpdateTrademark ? '修改' : '添加'}品牌`"
      :visible.sync="visible"
    >
      <!-- 默认插槽：body -->
      <!--
        ref="form" 获取组件的实例对象 -> 通过组件的实例对象来调用上面的方法
        :model="form" 绑定当前表单的数据
        label-width 决定表单项label的宽度
       -->
      <el-form ref="form" :model="trademark" :rules="rules" label-width="100px">
        <el-form-item label="品牌名称" prop="tmName">
          <el-input v-model="trademark.tmName" />
        </el-form-item>

        <el-form-item label="品牌LOGO" prop="logoUrl">
          <!--
            上传图片组件
            action="xxx" 上传图片服务器地址
              写完整地址：http://39.98.123.211/admin/product/fileUpload
              走代理服务器：/dev-api/admin/product/fileUpload
                process.env.VUE_APP_BASE_API
            show-file-list 显示文件列表（是否上传多张图片）
            on-success 上传成功触发事件
            before-upload 上传之前触发的事件
          -->
          <el-upload
            class="avatar-uploader"
            :action="`${baseURL}/admin/product/fileUpload`"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <!-- eslint-disable-next-line -->
            <img
              v-if="trademark.logoUrl"
              :src="trademark.logoUrl"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon" />
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <!-- 命名插槽 -->
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </el-card>
</template>

<script>
import {
  reqGetTrademarkList,
  reqSaveTrademark,
  reqUpdateTrademark,
  reqRemoveTrademark
} from '@/api/product/trademark'

export default {
  name: 'Trademark',
  data() {
    return {
      // 品牌数据列表
      trademarkList: [],
      // 当前页码
      currentPage: 1,
      // 每页条数
      pageSize: 3,
      // 总数
      total: 0,
      // loading值
      loading: false,
      // 对话框显示隐藏
      visible: false,
      // 品牌数据
      trademark: {
        // 品牌名称
        tmName: '',
        // 品牌LOGO
        logoUrl: ''
      },
      // 表单验证规则
      // 表单验证规则的属性名：必须和收集的数据的名称一致
      rules: {
        tmName: [
          { required: true, message: '请输入品牌名称', trigger: 'blur' }
        ],
        logoUrl: [
          { required: true, message: '请上传品牌LOGO', trigger: 'blur' }
        ]
      },
      // 请求地址前缀
      baseURL: process.env.VUE_APP_BASE_API,
      // 是否是更新
      isUpdateTrademark: false
    }
  },
  mounted() {
    this.getTrademarkList()
  },
  methods: {
    // 获取品牌分页列表
    async getTrademarkList() {
      this.loading = true
      const res = await reqGetTrademarkList(this.currentPage, this.pageSize)
      this.trademarkList = res.data.records
      this.total = res.data.total
      this.$message({
        type: 'success',
        message: '获取品牌分页列表成功'
      })
      this.loading = false
    },
    // 当每页条数发生变化触发的回调
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.getTrademarkList()
    },
    // 当当前页码发生变化触发的回调
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.getTrademarkList()
    },
    // 上传成功触发的回调
    handleAvatarSuccess(res) {
      this.trademark.logoUrl = res.data
      // 清空表单校验结果
      this.$refs.form.clearValidate(['logoUrl'])
    },
    // 上传之前触发的回调
    beforeAvatarUpload(file) {
      // 对上传图片的类型和大小进行限制
      const fileTypes = ['image/jpeg', 'image/jpg', 'image/png']

      const isValidFileType = fileTypes.includes(file.type)
      const isValidFileSize = file.size / 1024 < 500

      if (!isValidFileType) {
        this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!')
      }
      if (!isValidFileSize) {
        this.$message.error('上传头像图片大小不能超过 500KB!')
      }

      // 返回值true，通过，可以上传图片
      // 返回值false，不通过，不会上传图片
      return isValidFileType && isValidFileSize
    },
    // 提交表单
    submitForm() {
      // 对表单进行一次校验
      this.$refs.form.validate(async valid => {
        if (valid) {
          // 通过
          const { tmName, logoUrl, id } = this.trademark
          const { isUpdateTrademark } = this

          if (isUpdateTrademark) {
            await reqUpdateTrademark({ tmName, logoUrl, id })
          } else {
            await reqSaveTrademark(tmName, logoUrl)
          }

          // 提示添加成功
          // this.$message.success('添加品牌成功')
          this.$message({
            type: 'success',
            message: `${isUpdateTrademark ? '修改' : '添加'}品牌成功`
          })
          // 发送请求，请求最新的数据展示
          this.getTrademarkList()
          // 隐藏对话框
          this.visible = false
        }
      })
    },
    /*
    显示更新品牌
    showUpdateTrademark(row) {
      this.visible = true
      this.trademark = row
      this.isUpdateTrademark = true
      this.$refs.form.clearValidate()
    },
    // 显示添加品牌
    showSaveTrademark() {
      this.visible = true
      this.trademark = {
        tmName: '',
        logoUrl: ''
      }
      this.isUpdateTrademark = false
      this.$refs.form.clearValidate()
    }, */
    // 显示更新品牌
    showSaveOrUpdateTrademark(
      isUpdateTrademark,
      trademark = {
        tmName: '',
        logoUrl: ''
      }
    ) {
      this.visible = true
      // 产生一个新对象：目的为了让新对象和原对象不是同一个对象
      // 这样修改新对象上属性时，原对象就不会发生变化
      this.trademark = { ...trademark }
      this.isUpdateTrademark = isUpdateTrademark
      this.$refs.form?.clearValidate()
      // 第一次校验form表单的时候是个nudefined，所以在点击添加的时候会报错，这里加个?号就可以了
    },
    // 删除品牌
    delTrademark(row) {
      const that = this
      async function successCb() {
        await reqRemoveTrademark(row.id)
        that.$message({
          type: 'success',
          message: '删除成功'
        })
        that.getTrademarkList()
      }
      that.$confirm(
        `是否要删除 <span class="warning-text">${row.tmName}</span> 品牌吗?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          dangerouslyUseHTMLString: true
        }
      ).then(successCb)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  margin: 10px;
}
.table {
  margin: 10px 0;
}
.trademark-logo {
  width: 200px;
  height: 100px;
}
.trademark-logo {
  width: 200px;
  height: 100px;
}
</style>
